<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03封装class类</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            margin: 10px;
            background: pink;
        }
    </style>
    <script>
        window.onload = function(){
            //封装我们自己的根据类名获取元素的方法
            function getByClass(classname){
                //判断是否支持js原生方法（即区分IE678和其它浏览器）
                if(document.getElementsByClassName){
                    return document.getElementsByClassName(classname);
                }
                //程序走到这里，说明不支持document.getElementsByClassName方法，获取全部节点，遍历判断
                var arr = [];  //定义返回数组
                var elems = document.getElementsByTagName("*");  //获取页面所有节点
                for(var i=0;i<elems.length;i++){
                    //获取这个元素的class类，并使用空格分割（比如demo test，不分割单纯的判断会有问题）
                    var classes = elems[i].className.split(" ");
                    for(var j=0;j<classes.length;j++){
                        if(classes[j]==classname){
                            //存在此类名，将元素放入数组中
                            arr.push(elems[i]);
                        }
                    }
                }
                return arr;
            }
            //调用
            var tests = getByClass("test");
            for(var k=0;k<tests.length;k++){
                tests[k].style.backgroundColor="red";   //结果就是两个变红，IE678测试没有问题
            }
        }
    </script>
</head>
<body>
<div></div>
<div class="demo"></div>
<div></div>
<div class="demo test"></div>
<div></div>
<div class="test one"></div>
<div></div>
</body>
</html>